
<template>
  <div class="module_edit_container">
    <div class="module_edit">
      <div
        class="module_mobile_content"
        @dragover="dragOver"
        @drop="drop"
        @dragenter="dragEnter"
        @dragleave="leaveDrag"
      >
        <div class="mobile_top">
          <div class="global_page_title">
            {{ pageInfo.pageBaseInfo.title || "页面名称" }}
          </div>
        </div>
        <div
          class="component_item"
          v-for="(item, index) in components"
          :key="index"
        >
          <div class="error_tip" v-if="item.isError">
            <a-tooltip placement="bottom">
              <template slot="title">
                <span>该组件有内容未编辑完善</span>
              </template>
              <a-button
                type="danger"
                size="small"
                shape="circle"
                icon="exclamation"
              />
            </a-tooltip>
          </div>
          <div
            class="pre"
            v-if="
              relativeComponent &&
              item.id === relativeComponent.id &&
              relativeType === 'pre'
            "
          >
            <img
              style="width: 45px; height: auto; margin: auto 0"
              :src="dragComponent.img"
              alt=""
            />
            {{ dragComponent.name }}
          </div>
          <component
            class="hover"
            :class="{
              active: activeComponent && activeComponent.id == item.id,
              error: item.isError,
            }"
            v-bind="item"
            v-bind:is="item.type"
            @click.native="setCurrentComponent(item, index, $event)"
            @contextmenu.native.prevent="contextmenu(item, $event)"
            @dragover.native.stop="checkDragOver(item, index, $event)"
          >
          </component>
          <div
            class="next"
            v-if="
              relativeComponent &&
              item.id === relativeComponent.id &&
              relativeType === 'next'
            "
          >
            <img
              style="width: 45px; height: auto; margin: auto 0"
              :src="dragComponent.img"
              alt=""
            />
            {{ dragComponent.name }}
          </div>
        </div>
        <div class="default_next" v-if="isCalculate && relativeType === ''">
          <img
            style="width: 45px; height: auto; margin: auto 0"
            :src="dragComponent.img"
            alt=""
          />
          {{ dragComponent.name }}
        </div>
      </div>
    </div>
    <a-popover class="module_edit_setting" placement="left">
      <template slot="content">
        <p>页面设置</p>
      </template>
      <a-icon type="setting" @click="setDefaultPage" />
    </a-popover>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { EventBus } from "@/Bus/Bus";
import { uniqueKey } from "@/util/index";
import Picture from "@/components/Element/Picture/Picture";
import Search from "@/components/Element/Search/Search";
import Carousel from "@/components/Element/Carousel/Carousel";
import Texts from "@/components/Element/Text/Text";
import Title from "@/components/Element/Title/Title";
export default {
  data() {
    return {
      relativeType: "", //当前拖拽即将放入的位置next=>下一个 pre=>上一个
      relativeComponent: null, //当前拖拽所影响的组件
      isCalculate: false,
    };
  },
  computed: {
    //映射组件的状态
    ...mapState({
      pageInfo: (state) => state.pageInfo,
      components: (state) => state.components,
      activeComponent: (state) => state.activeComponent, //当前所选中的组件
      dragComponent: (state) => state.dragComponent, //当前所拖拽的组件
    }),
  },
  methods: {
    //拖拽最后放下组件所执行
    drop(e) {
      let currentTarget = JSON.parse(e.dataTransfer.getData("component"));
      let activeComponent = {
        id: uniqueKey(),
        ...currentTarget,
      };
      if (currentTarget) {
        if (this.relativeType != "") {
          this.addRelativeComponents({
            relativeType: this.relativeType,
            relativeComponent: this.relativeComponent,
            component: activeComponent,
          });
        } else {
          this.addComponents(activeComponent);
        }
      }
      this.isCalculate = false;
      this.setCurrentComponents(activeComponent);
      this.resetComponents();
    },
    //拖拽完成
    dragOver(ev) {
      ev.preventDefault();
    },
    // 计算当前所拖拽组件的位置
    checkDragOver(component, index, ev) {
      ev.preventDefault();
      let currentTarget = ev.dataTransfer.getData("component");
      let height = ev.currentTarget.offsetHeight;
      let topDis = ev.offsetY - this.dragComponent.extra.pointY;
      let bottomDis = height - topDis - this.dragComponent.extra.height;
      let leftDis = ev.offsetX - this.dragComponent.extra.pointX;
      if (topDis < bottomDis) {
        //上边界超出
        this.relativeType = "pre";
      } else {
        //下边界超出
        this.relativeType = "next";
      }
      this.relativeComponent = component;
      /**
       * 1.判断总长度是否为一，
       * 2.如果为1，且是next，则继续
       * 3.如果为1，且是pre，则继续
       * 4.如果不为1，且为next，则继续
       * 5.如果不为1，且为pre，则上一个组件(将relativeComponent设为上一个)的next点亮
       * 6.如果当前为第一个，则继续
       * 7.如果当前不为第一个，则取上一个
       */
      if (this.components.length !== 1) {
        if (this.relativeType === "pre" && index != 0) {
          let preComponents = this.components[index - 1];
          this.relativeComponent = preComponents;
          this.relativeType = "next";
        }
      }
    },
    //监听所拖拽的组件已进入编辑区域
    dragEnter(e) {
      if (e.fromElement.className === "module_edit") {
        this.isCalculate = true;
      }
    },
    //监听所拖拽的组件已离开编辑区域
    leaveDrag(e) {
      if (e.fromElement.className === "module_edit") {
        this.resetComponents();
      }
    },
    //点击选中当前的组件
    setCurrentComponent(componnet, index, ev) {
      if (componnet.id !== this.activeComponent.id) {
        this.setCurrentComponents(componnet);
      }
    },
    //渲染默认页面的设置组件
    setDefaultPage() {
      this.setCurrentComponents("default");
    },
    //重置页面上的组件
    resetComponents() {
      this.relativeComponent = null;
      this.relativeType = "";
    },
    //右击时选中当前菜单
    contextmenu(item, ev) {
      this.setCurrentComponents(item);
      let left = ev.clientX,
        top = ev.clientY;
      this.isShowContextMenu({ top, left, show: true });
    },
    ...mapMutations([
      "addComponents",
      "addRelativeComponents",
      "setCurrentComponents",
      "setDragComponent",
      "isShowContextMenu",
    ]),
  },
  mounted() {
    this.relativeComponent = this.components[this.components.length];
    this.relativeType = "";
  },
  components: {
    Picture,
    Search,
    Carousel,
    Title,
    Texts,
  },
};
</script>
<style lang="scss" scoped>
.module_edit_container {
  position: relative;
  flex: 1;
  // min-width: 686px;
  .module_edit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .module_mobile_content {
      max-width: 375px;
      width: 375px;
      margin: 60px auto;
      // height: 667px;
      min-height: 667px;
      background-color: #fff;
      -webkit-box-shadow: 0 0 28px 0 #ccc;
      box-shadow: 0 0 28px 0 #ccc;
      position: relative;
      transition: 0.2s;
      .component_item {
        position: relative;
        .error_tip {
          position: absolute;
          width: auto;
          height: auto;
          right: -60px;
          font-size: 22px;
          text-align: center;
          margin: auto;
        }
        .pre,
        .next {
          width: 100%;
          background: #c5e0e8;
          transition: height 0.5s ease;
          overflow: hidden;
          text-align: center;
          color: #44444c;
          height: 40px;
          line-height: 40px;
        }
      }

      .mobile_top {
        height: 64px;
        width: 375px;
        background: url(https://cdn2.weimob.com/saas/@assets/saas-fe-retail-web-stc/retail2/images/storeDesign/ad_moible_top.png)
          no-repeat 50%/100% 100%;
        position: relative;
        .global_page_title {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          text-align: center;
          line-height: 85px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
        }
      }
      .default_next {
        width: 100%;
        background: #c5e0e8;
        transition: height 0.5s ease;
        overflow: hidden;
        text-align: center;
        color: #44444c;
        height: 40px;
        line-height: 40px;
      }
      .hover {
        box-sizing: border-box;
        position: relative;
        &:hover {
          &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border: 2px solid #2589ff;
            transition: 0.3s;
          }
          .error {
            border: none;
          }
        }
      }
      .error {
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border: 2px solid #db2b13;
          transition: 0.3s;
        }
      }
      .active {
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border: 2px solid #2589ff;
          transition: 0.3s;
        }
      }
      .hover-pre::before {
        content: "";
        // width: 100px;
        height: 10px;
        font-size: 0;
        border: 1px red solid;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: -1px -1px 2px red;
      }
      .hover-next::after {
        content: "";
        width: 100%;
        height: 30px;
        font-size: 0;
        border: 1px red solid;
        // background-color: blue;
        // position: absolute;
        // bottom: 0;
        // left: 0;
        // right: 0;
        box-shadow: -1px -1px 2px red;
      }
      .hover-middle::before {
        content: "";
        height: 10px;
        font-size: 0;
        background-color: yellow;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: -1px -1px 2px red;
      }
    }
  }
  .module_edit_setting {
    text-align: center;
    background: #fff;
    color: #b0afb2;
    line-height: 47px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    position: fixed;
    top: 120px;
    z-index: 3;
    left: calc(50% - 300px);
  }
}
</style>